<template>
  <div class="life-death-page">
    <!-- 页面头部区域 -->
    <div class="life-death-header">
      <div class="header-content">
        <div class="ancient-title">寿命与生死管理</div>
        <div class="header-subtitle">阴曹地府 · 生死司管理中心</div>
      </div>
      <div class="header-decoration">
        <div class="decoration-line"></div>
        <div class="decoration-symbol">⚰</div>
        <div class="decoration-line"></div>
      </div>
    </div>

    <!-- 统计信息区域 -->
    <div class="stats-section">
      <a-row :gutter="[20, 20]" class="stats-grid">
        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card primary-stat">
            <div class="stat-icon">
              <UserOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">总记录数</div>
              <div class="stat-value">{{ totalLifeRecords?.toLocaleString() }}</div>
              <div class="stat-label">累计管理</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card alive-stat">
            <div class="stat-icon">
              <HeartOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">在世人数</div>
              <div class="stat-value">{{ aliveCount?.toLocaleString() }}</div>
              <div class="stat-label">存续生命</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card dead-stat">
            <div class="stat-icon">
              <BookOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">已故人数</div>
              <div class="stat-value">{{ deadCount?.toLocaleString() }}</div>
              <div class="stat-label">归册记录</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card warning-stat">
            <div class="stat-icon">
              <ExclamationCircleOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">寿命预警</div>
              <div class="stat-value">{{ warningCount }}</div>
              <div class="stat-label">高危人员</div>
            </div>
          </div>
        </a-col>
      </a-row>

      <a-row :gutter="[20, 20]" class="stats-grid" style="margin-top: 20px">
        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card average-stat">
            <div class="stat-icon">
              <BarChartOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">平均寿命</div>
              <div class="stat-value">{{ averageLifespan }}岁</div>
              <div class="stat-label">统计数据</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card natural-stat">
            <div class="stat-icon">
              <CoffeeOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">自然死亡</div>
              <div class="stat-value">{{ deathStatistics.natural || 0 }}</div>
              <div class="stat-label">正常死因</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card accident-stat">
            <div class="stat-icon">
              <AlertOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">意外死亡</div>
              <div class="stat-value">{{ deathStatistics.accident || 0 }}</div>
              <div class="stat-label">异常死因</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card disaster-stat">
            <div class="stat-icon">
              <ThunderboltOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">天灾死亡</div>
              <div class="stat-value">{{ (deathStatistics.disaster || 0) + (deathStatistics.war || 0) + (deathStatistics.plague || 0) }}</div>
              <div class="stat-label">特殊情况</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 搜索和操作栏 -->
    <a-card :bordered="false" class="search-card modern-card">
      <a-row :gutter="[16, 16]" align="middle">
        <a-col :xs="24" :sm="12" :md="8">
          <a-input-search v-model:value="searchQuery" placeholder="搜索姓名、地点或职业" @search="handleSearch" class="search-input">
            <template #prefix>
              <SearchOutlined />
            </template>
          </a-input-search>
        </a-col>

        <a-col :xs="24" :sm="12" :md="4">
          <a-select v-model:value="statusFilter" placeholder="状态筛选" @change="handleFilterChange" class="filter-select">
            <a-select-option value="all">全部状态</a-select-option>
            <a-select-option value="alive">在世</a-select-option>
            <a-select-option value="dead">已故</a-select-option>
            <a-select-option value="warning">寿命预警</a-select-option>
          </a-select>
        </a-col>

        <a-col :xs="24" :sm="12" :md="4">
          <a-select v-model:value="deathCauseFilter" placeholder="死因筛选" @change="handleFilterChange" class="filter-select">
            <a-select-option value="all">全部死因</a-select-option>
            <a-select-option value="natural">自然死亡</a-select-option>
            <a-select-option value="accident">意外死亡</a-select-option>
            <a-select-option value="disaster">自然灾害</a-select-option>
            <a-select-option value="war">战争伤亡</a-select-option>
            <a-select-option value="plague">瘟疫死亡</a-select-option>
          </a-select>
        </a-col>

        <a-col :xs="24" :sm="12" :md="8">
          <a-space>
            <a-button type="primary" @click="showAddLifeRecord">
              <PlusOutlined />
              新增记录
            </a-button>
            <a-button @click="showAddDeathRecord">
              <FileTextOutlined />
              死亡登记
            </a-button>
            <a-button @click="showSpecialCase">
              <WarningOutlined />
              特殊情况
            </a-button>
            <a-button @click="handleReset">
              <ReloadOutlined />
              重置
            </a-button>
          </a-space>
        </a-col>
      </a-row>
    </a-card>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <a-tabs v-model:activeKey="activeTab" type="card" class="content-tabs">
        <!-- 寿命计算系统 -->
        <a-tab-pane key="lifespan" tab="寿命计算系统">
          <div class="tab-content">
            <LifespanManagement />
          </div>
        </a-tab-pane>

        <!-- 死亡登记管理 -->
        <a-tab-pane key="death" tab="死亡登记管理">
          <div class="tab-content">
            <DeathRegistration />
          </div>
        </a-tab-pane>

        <!-- 特殊情况处理 -->
        <a-tab-pane key="special" tab="特殊情况处理">
          <div class="tab-content">
            <SpecialCaseManagement />
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>

    <!-- 新增寿命记录对话框 -->
    <a-modal v-model:open="showAddLifeModal" title="新增寿命记录" width="800px" :footer="null">
      <AddLifeRecordForm @success="handleAddLifeSuccess" @cancel="showAddLifeModal = false" />
    </a-modal>

    <!-- 死亡登记对话框 -->
    <a-modal v-model:open="showDeathModal" title="死亡登记" width="900px" :footer="null">
      <AddDeathRecordForm @success="handleAddDeathSuccess" @cancel="showDeathModal = false" />
    </a-modal>

    <!-- 特殊情况对话框 -->
    <a-modal v-model:open="showSpecialModal" title="特殊情况处理" width="800px" :footer="null">
      <AddSpecialCaseForm @success="handleAddSpecialSuccess" @cancel="showSpecialModal = false" />
    </a-modal>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { UserOutlined, HeartOutlined, BookOutlined, ExclamationCircleOutlined, BarChartOutlined, CoffeeOutlined, AlertOutlined, ThunderboltOutlined, SearchOutlined, PlusOutlined, FileTextOutlined, WarningOutlined, ReloadOutlined } from '@ant-design/icons-vue'
import { useLifeDeathStore } from '@/stores/lifeDeath'
import LifespanManagement from './components/LifespanManagement.vue'
import DeathRegistration from './components/DeathRegistration.vue'
import SpecialCaseManagement from './components/SpecialCaseManagement.vue'
import AddLifeRecordForm from './components/AddLifeRecordForm.vue'
import AddDeathRecordForm from './components/AddDeathRecordForm.vue'
import AddSpecialCaseForm from './components/AddSpecialCaseForm.vue'

// 使用store
const lifeDeathStore = useLifeDeathStore()

// 响应式数据
const activeTab = ref('lifespan')
const searchQuery = ref('')
const statusFilter = ref('all')
const deathCauseFilter = ref('all')
const showAddLifeModal = ref(false)
const showDeathModal = ref(false)
const showSpecialModal = ref(false)

// 计算属性
const totalLifeRecords = computed(() => lifeDeathStore.totalLifeRecords)
const aliveCount = computed(() => lifeDeathStore.aliveCount)
const deadCount = computed(() => lifeDeathStore.deadCount)
const warningCount = computed(() => lifeDeathStore.warningCount)
const averageLifespan = computed(() => lifeDeathStore.averageLifespan)
const deathStatistics = computed(() => lifeDeathStore.deathStatistics)

// 方法
const handleSearch = () => {
  lifeDeathStore.setSearchQuery(searchQuery.value)
}

const handleFilterChange = () => {
  lifeDeathStore.setFilters({
    status: statusFilter.value,
    deathCause: deathCauseFilter.value
  })
}

const handleReset = () => {
  searchQuery.value = ''
  statusFilter.value = 'all'
  deathCauseFilter.value = 'all'
  lifeDeathStore.resetFilters()
}

const showAddLifeRecord = () => {
  showAddLifeModal.value = true
}

const showAddDeathRecord = () => {
  showDeathModal.value = true
}

const showSpecialCase = () => {
  showSpecialModal.value = true
}

const handleAddLifeSuccess = () => {
  showAddLifeModal.value = false
  message.success('寿命记录添加成功')
}

const handleAddDeathSuccess = () => {
  showDeathModal.value = false
  message.success('死亡记录添加成功')
}

const handleAddSpecialSuccess = () => {
  showSpecialModal.value = false
  message.success('特殊情况记录添加成功')
}

// 生命周期
onMounted(() => {
  lifeDeathStore.fetchLifeRecords()
})
</script>

<style lang="scss" scoped>
@use '@/styles/variables.scss' as *;

.life-death-page {
  min-height: 100vh;
  padding: 24px;

  .life-death-header {
    text-align: center;
    margin-bottom: 32px;
    padding: 40px 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid $border-color;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(10px);

    .header-content {
      .ancient-title {
        font-size: 42px;
        font-weight: bold;
        margin-bottom: 8px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
      }

      .header-subtitle {
        font-size: 16px;
        color: $text-secondary;
        letter-spacing: 2px;
      }
    }

    .header-decoration {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 24px;
      gap: 16px;

      .decoration-line {
        width: 100px;
        height: 2px;
        background: linear-gradient(90deg, transparent, $secondary-color, transparent);
      }

      .decoration-symbol {
        font-size: 24px;
        color: $secondary-color;
      }
    }
  }

  .stats-section {
    margin-bottom: 24px;

    .stats-grid {
      .stat-card {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid $border-color;
        border-radius: 12px;
        padding: 24px;
        display: flex;
        align-items: center;
        gap: 16px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
        backdrop-filter: blur(10px);
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
          background: rgba(255, 255, 255, 0.08);
        }

        .stat-icon {
          width: 48px;
          height: 48px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24px;
        }

        .stat-content {
          flex: 1;

          .stat-title {
            font-size: 14px;
            color: $text-secondary;
            margin-bottom: 4px;
          }

          .stat-value {
            font-size: 28px;
            font-weight: bold;
            color: $text-primary;
            margin-bottom: 4px;
          }

          .stat-label {
            font-size: 12px;
            color: $text-tertiary;
          }
        }

        &.primary-stat .stat-icon {
          background: linear-gradient(135deg, $primary-color, $primary-color-light);
          color: white;
        }

        &.alive-stat .stat-icon {
          background: linear-gradient(135deg, #52c41a, #73d13d);
          color: white;
        }

        &.dead-stat .stat-icon {
          background: linear-gradient(135deg, #8c8c8c, #bfbfbf);
          color: white;
        }

        &.warning-stat .stat-icon {
          background: linear-gradient(135deg, #fa8c16, #ffa940);
          color: white;
        }

        &.average-stat .stat-icon {
          background: linear-gradient(135deg, $secondary-color, #fadb14);
          color: white;
        }

        &.natural-stat .stat-icon {
          background: linear-gradient(135deg, #1890ff, #40a9ff);
          color: white;
        }

        &.accident-stat .stat-icon {
          background: linear-gradient(135deg, #fa541c, #ff7a45);
          color: white;
        }

        &.disaster-stat .stat-icon {
          background: linear-gradient(135deg, #f5222d, #ff4d4f);
          color: white;
        }
      }
    }
  }

  .search-card {
    margin-bottom: 24px;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);

    .search-input {
      border-radius: 8px;
    }

    .filter-select {
      width: 100%;
      border-radius: 8px;
    }
  }

  .main-content {
    .content-tabs {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid $border-color;
      border-radius: 12px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
      backdrop-filter: blur(10px);

      :deep(.ant-tabs-nav) {
        padding: 0 24px;
        margin: 0;
        border-bottom: 1px solid $border-color;
      }

      :deep(.ant-tabs-tab) {
        border-radius: 8px 8px 0 0;
        margin-right: 8px;
        color: $text-secondary;

        &.ant-tabs-tab-active {
          color: $primary-color;
          border-bottom-color: $primary-color;
        }

        &:hover {
          color: $primary-color;
        }
      }

      .tab-content {
        padding: 24px;
        min-height: 600px;
      }
    }
  }

  .modern-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid $border-color;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  }
}
</style>
